<template>
  <div class="mainContent">
    <div class="RegisterBox">
      <el-container>
        <el-aside width='720px' class="asideContent">
          <div class="ltContent">
            <el-row style="display: flex; align-items: center;">
              <el-col :span="6"><span>请选择您的身份</span></el-col>
              <el-col :span="12">
                <el-radio-group v-model="Choose">
                  <el-radio-button label="个人注册"></el-radio-button>
                  <el-radio-button label="机构注册"></el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
          <!-- 个人注册 -->
          <div class="lmContent" v-if="show">
            <el-form ref="form" :model="RegisterForm" label-width="atuo">
              <el-form-item prop='phoneNum' class="Input">
                <el-input v-model="RegisterForm.phoneNum" placeholder="手机号"></el-input>
              </el-form-item>
              <!-- <el-form-item>
                <el-col :span="11">
                  <el-input placeholder="短信验证码" style="width:100%"></el-input>
                </el-col>
                <el-col :span="11" :offset="2">
                  <el-button type="warning" style="width:100%">获取短信验证码</el-button>
                </el-col>
              </el-form-item> -->
              <el-form-item>
                <el-col :span="11">
                  <el-input v-model="RegisterForm.captcha" placeholder="右侧图片内容"></el-input>
                </el-col>
                <el-col :span="11" :offset="2">
                  <img :src="'data:image/jpeg;base64,'+vcaptchaImg" @click="getVcaptchaImg"></img>
                </el-col>
              </el-form-item>
              <el-form-item prop='agencyName' class="Input">
                <el-input v-model="RegisterForm.agencyName" placeholder="单位名称" ></el-input>
              </el-form-item>
              <el-form-item prop='password' class="Input">
                <el-input v-model="RegisterForm.password" type="password" placeholder="登录密码" ></el-input>
              </el-form-item>
              <el-form-item class="Input">
                <el-checkbox v-model="checked">同意</el-checkbox>
                <el-button type="text">会员服务协议</el-button>
                <el-button type="text">隐私保护政策</el-button>
              </el-form-item>
              <el-form-item>
                <el-button @click="handleRegist" type="primary" class="login-button" style="width: 100%;">提交注册</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 机构注册 -->
          <div class="lmContent" v-if="!show">
            <el-form ref="form" :model="RegisterForm" label-width="atuo">
              <el-form-item prop='phoneNum' class="Input">
                <el-input v-model="RegisterForm.phoneNum" placeholder="手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-col :span="11">
                  <el-input v-model="RegisterForm.captcha" placeholder="右侧图片内容"></el-input>
                </el-col>
                <el-col :span="11" :offset="2">
                  <img :src="'data:image/jpeg;base64,'+vcaptchaImg" @click="getVcaptchaImg"></img>
                </el-col>
              </el-form-item>


              <el-form-item prop='agencyName' class="Input">

                <el-input v-model="RegisterForm.agencyName" placeholder="单位名称" ></el-input>
              </el-form-item>
              <el-form-item prop='linkman' class="Input">
                <el-input v-model="RegisterForm.linkman" placeholder="联系人" ></el-input>
              </el-form-item>
              <el-form-item prop='agencyCode' class="Input">
                <el-input v-model="RegisterForm.agencyCode" placeholder="统一社会信用代码" ></el-input>
              </el-form-item>
              <el-form-item prop='password' class="Input">
                <el-input v-model="RegisterForm.password" type="password" placeholder="登录密码" ></el-input>
              </el-form-item>
              <el-form-item class="Input">
                <el-checkbox v-model="checked">同意</el-checkbox>
                <el-button type="text">会员服务协议</el-button>
                <el-button type="text">隐私保护政策</el-button>
              </el-form-item>
              <el-form-item>
                <el-button @click="handleRegist" type="primary" class="login-button" style="width: 100%;">提交注册</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-aside>
        <el-main>
          <el-row style="display: flex;align-items: center;">
            <el-col :span="8"><h4>已有账号 >>></h4></el-col>
            <el-col :span="6"><el-button type="text" @click="GoLogin">直接登录</el-button></el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
     Choose: '个人注册',
     RegisterForm:{
       phoneNum: '',
       agencyName: '',
       password: '',
       linkman: '',
       agencyCode: '',
       captcha: '',
       captchaid:'', // 存图片验证码的id
       usertype: '1',
     },
     checked: true,
     show: true, // 控制个人注册和机构注册
     vcaptchaImg:'', // 临时存验证码的url
    }
  },
  created() {
    this.getVcaptchaImg();
  },
  methods: {
    // 注册
    handleRegist() {
      let params = {
        captchaid: this.RegisterForm.captchaid,
        captcha: this.RegisterForm.captcha,
        username: '',
        password: this.$MD5(this.RegisterForm.password),
        usertype: this.RegisterForm.usertype,
        email: '',
        mobile: this.RegisterForm.phoneNum,
        orgcode: this.RegisterForm.agencyCode,
        contact: this.RegisterForm.linkman,
      }

      this.api.regist(params).then(res => {
        console.log(res);

      }).catch(err => {
        this.$message({
          type: "info",
          message: err
        })
      })
    },
    // 跳转
    GoLogin() {
      this.$router.push({path:'/user/login'});
    },
    // 获取图片验证码
    getVcaptchaImg(){
      this.api.getcaptcha().then(res=>{
        console.log(res);
        if(res.success === true && res.code===200){
          this.RegisterForm.captchaid = res.data.captcha_id;
          this.vcaptchaImg = res.data.captcha
        }
      })
    }
  },
  watch: {
    Choose(newVal,oldVal){
      this.show = !this.show;
      this.getVcaptchaImg();
      if(newVal == '个人注册'){
        this.RegisterForm.usertype = 1;
      }else if(newVal == '机构注册'){
        this.RegisterForm.usertype = 2;
      }
    }
  }
}
</script>

<style scoped>
.mainContent{
  background-color: orange;
  padding: 60px 120px;
}
.RegisterBox{
  width: 1080px;
  background-color: white;
  margin: auto;
  padding: 26px;
}
.asideContent{
  border-right: 1px solid rgb(98, 151, 194);
  height: auto;
  
}
.ltContent{
  border-bottom: 1px solid rgb(98, 151, 194);
  height: 60px; 
}
.lmContent{
  margin-top: 60px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.VCInput{
  width: 260px;
}
</style>

